﻿  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="media/images/favicon.ico">
		
		<title>Ordering grouped rows</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
		</style>

        <script src="media/js/jquery.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.rowReordering.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.rowGrouping.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
		    $(document).ready(function () {
		        $('#example').dataTable()
                                .rowGrouping({ iGroupingColumnIndex: 0 })
                                .rowReordering({ bGroupingUsed: true, iIndexColumn:1 });
		    });
		</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17838786-6']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	</head>




<body id="dt_example">

		<div id="container">
			<a href="index.html">Home</a>
			<a href="http://code.google.com/p/jquery-datatables-row-reordering/wiki/RowGrouping">Wiki</a> 
			<h1 class="full_width big">

				JQuery DataTable Row Reordering - Integration with the Row Grouping plugin
			</h1>
						
			<p>You can reorder rows even if they are partitioned in the groups. The only constraint it that you cannot move
			rows between different groups (if you need this you will need to edit row first to change its group, and then reorder it).
			In the example below try to drag and drop rows withing the same group to change their positions.</p>
			<h2>Live example</h2>







			<div id="demo">





<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>

			<th>Rendering engine</th>
			        <th></th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Rendering engine</th>
			        <th></th>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>

	</tfoot>
	<tbody>
  
  
    	
<tr  data-position="8" class="even_gradeA" id="107"><td>gecko</td><td>1</td>
			
			<td class="">Firefox 1.5</td>
			<td class=" ">Win 98+ / OSX.2+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr  data-position="9" class="odd_gradeA" id="108"><td>gecko</td><td>2</td>
			
			<td class="">Firefox 2.0</td>
			<td class=" ">Win 98+ / OSX.2+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr  data-position="10" class="even_gradeA" id="109"><td>gecko</td><td>3</td>
			
			<td class="">Firefox 3.0</td>
			<td class=" ">Win 2k+ / OSX.3+</td>
			<td class="center ">1.9</td>

			<td class="center ">A</td>
		</tr><tr  data-position="11" class="odd_gradeA" id="110"><td>gecko</td><td>4</td>
			
			<td class="">Camino 1.0</td>
			<td class=" ">OSX.2+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr  data-position="12" class="even_gradeA" id="111"><td>gecko</td><td>5</td>
			
			<td class="">Camino 1.5</td>
			<td class=" ">OSX.3+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr style=""  data-position="19" class="odd_gradeA" id="118"><td>gecko</td><td>6</td>
			
			<td class="">Mozilla 1.3</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1.3</td>

			<td class="center ">A</td>
		</tr><tr  data-position="13" class="odd_gradeA" id="112"><td>gecko</td><td>7</td>
			
			<td class="">Netscape 7.2</td>
			<td class=" ">Win 95+ / Mac OS 8.6-9.2</td>
			<td class="center ">1.7</td>

			<td class="center ">A</td>
		</tr><tr  data-position="14" class="even_gradeA" id="113"><td>gecko</td><td>8</td>
			
			<td class="">Netscape Browser 8</td>
			<td class=" ">Win 98SE+</td>
			<td class="center ">1.7</td>

			<td class="center ">A</td>
		</tr><tr  data-position="15" class="odd_gradeA" id="114"><td>gecko</td><td>9</td>
			
			<td class="">Netscape Navigator 9</td>
			<td class=" ">Win 98+ / OSX.2+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr  data-position="16" class="even_gradeA" id="115"><td>gecko</td><td>10</td>
			
			<td class="">Mozilla 1.0</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1</td>

			<td class="center ">A</td>
		</tr><tr  data-position="17" class="odd_gradeA" id="116"><td>gecko</td><td>11</td>
			
			<td class="">Mozilla 1.1</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1.1</td>

			<td class="center ">A</td>
		</tr><tr  data-position="18" class="even_gradeA" id="117"><td>gecko</td><td>12</td>
			
			<td class="">Mozilla 1.2</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1.2</td>

			<td class="center ">A</td>
		</tr><tr  data-position="20" class="even_gradeA" id="119"><td>gecko</td><td>13</td>
			
			<td class="">Mozilla 1.4</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1.4</td>

			<td class="center ">A</td>
		</tr><tr  data-position="21" class="odd_gradeA" id="120"><td>gecko</td><td>14</td>
			
			<td class="">Mozilla 1.5</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1.5</td>

			<td class="center ">A</td>
		</tr><tr  data-position="22" class="even_gradeA" id="121"><td>gecko</td><td>15</td>
			
			<td class="">Mozilla 1.6</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">1.6</td>

			<td class="center ">A</td>
		</tr><tr  data-position="23" class="odd_gradeA" id="122"><td>gecko</td><td>16</td>
			
			<td class="">Mozilla 1.7</td>
			<td class=" ">Win 98+ / OSX.1+</td>
			<td class="center ">1.7</td>

			<td class="center ">A</td>
		</tr><tr  data-position="24" class="even_gradeA" id="123"><td>gecko</td><td>17</td>
			
			<td class="">Mozilla 1.8</td>
			<td class=" ">Win 98+ / OSX.1+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr  data-position="25" class="odd_gradeA" id="124"><td>gecko</td><td>18</td>
			
			<td class="">Seamonkey 1.1</td>
			<td class=" ">Win 98+ / OSX.2+</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr><tr  data-position="26" class="even_gradeA" id="125"><td>gecko</td><td>19</td>
			
			<td class="">Epiphany 2.20</td>
			<td class=" ">Gnome</td>
			<td class="center ">1.8</td>

			<td class="center ">A</td>
		</tr>
		<tr style=""  data-position="7" class="odd_gradeA" id="106"><td>Gecko</td><td>20</td>
			
			<td class="">Firefox 1.0</td>
			<td class=" ">Win 98+ / OSX.2+</td>
			<td class="center ">1.7</td>

			<td class="center ">A</td>
		</tr>
		<tr style=""  data-position="46" class="even_gradeA" id="145"><td>khtml</td><td>1</td>
			
			<td class="">Konqureror 3.5</td>
			<td class=" ">KDE 3.5</td>

			<td class="center ">3.5</td>
			<td class="center ">A</td>
		</tr><tr  data-position="44" class="even_gradeC" id="143"><td>khtml</td><td>2</td>
			
			<td class="">Konqureror 3.1</td>
			<td class=" ">KDE 3.1</td>

			<td class="center ">3.1</td>
			<td class="center ">C</td>
		</tr><tr style=""  data-position="45" class="odd_gradeA" id="144"><td>khtml</td><td>3</td>
			
			<td class="">Konqureror 3.3</td>
			<td class=" ">KDE 3.3</td>

			<td class="center ">3.3</td>
			<td class="center ">A</td>
		</tr>
		<tr  data-position="50" class="even_gradeA" id="149"><td>misc</td><td>1</td>
			
			<td class="">NetFront 3.1</td>
			<td class=" ">Embedded devices</td>

			<td class="center ">-</td>
			<td class="center ">C</td>
		</tr><tr  data-position="51" class="odd_gradeA" id="150"><td>misc</td><td>2</td>
			
			<td class="">NetFront 3.4</td>
			<td class=" ">Embedded devices</td>

			<td class="center ">-</td>
			<td class="center ">A</td>
		</tr><tr style=""  data-position="55" class="odd_gradeC" id="154"><td>misc</td><td>3</td>
			
			<td class="">IE Mobile</td>
			<td class=" ">Windows Mobile 6</td>

			<td class="center ">-</td>
			<td class="center ">C</td>
		</tr><tr  data-position="52" class="even_gradeX" id="151"><td>misc</td><td>4</td>
			
			<td class="">Dillo 0.8</td>
			<td class=" ">Embedded devices</td>

			<td class="center ">-</td>
			<td class="center ">X</td>
		</tr><tr  data-position="53" class="odd_gradeX" id="152"><td>misc</td><td>5</td>
			
			<td class="">Links</td>
			<td class=" ">Text only</td>

			<td class="center ">-</td>
			<td class="center ">X</td>
		</tr><tr  data-position="54" class="even_gradeX" id="153"><td>misc</td><td>6</td>
			
			<td class="">Lynx</td>
			<td class=" ">Text only</td>

			<td class="center ">-</td>
			<td class="center ">X</td>
		</tr><tr  data-position="56" class="even_gradeC" id="155"><td>misc</td><td>7</td>
			
			<td class="">PSP browser</td>
			<td class=" ">PSP</td>

			<td class="center ">-</td>
			<td class="center ">C</td>
		</tr>
		<tr style=""  data-position="57" class="odd_gradeU" id="156"><td>other-browsers</td><td>1</td>
			
			<td class="">All others</td>
			<td class=" ">-</td>

			<td class="center ">-</td>
			<td class="center ">U</td>
		</tr>
		<tr  data-position="34" class="even_gradeA" id="133"><td>presto</td><td>1</td>
			
			<td class="">Opera 7.0</td>
			<td class=" ">Win 95+ / OSX.1+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr style=""  data-position="40" class="even_gradeA" id="139"><td>presto</td><td>2</td>
			
			<td class="">Opera 9.5</td>
			<td class=" ">Win 88+ / OSX.3+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="35" class="odd_gradeA" id="134"><td>presto</td><td>3</td>
			
			<td class="">Opera 7.5</td>
			<td class=" ">Win 95+ / OSX.2+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="36" class="even_gradeA" id="135"><td>presto</td><td>4</td>
			
			<td class="">Opera 8.0</td>
			<td class=" ">Win 95+ / OSX.2+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="37" class="odd_gradeA" id="136"><td>presto</td><td>5</td>
			
			<td class="">Opera 8.5</td>
			<td class=" ">Win 95+ / OSX.2+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="38" class="even_gradeA" id="137"><td>presto</td><td>6</td>
			
			<td class="">Opera 9.0</td>
			<td class=" ">Win 95+ / OSX.3+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="39" class="odd_gradeA" id="138"><td>presto</td><td>7</td>
			
			<td class="">Opera 9.2</td>
			<td class=" ">Win 88+ / OSX.3+</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="41" class="odd_gradeA" id="140"><td>presto</td><td>8</td>
			
			<td class="">Opera for Wii</td>
			<td class=" ">Wii</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="42" class="even_gradeA" id="1009"><td>presto</td><td>9</td>
			
			<td class="">Nokia N800</td>
			<td class=" ">N800</td>
			<td class="center ">-</td>

			<td class="center ">A</td>
		</tr><tr  data-position="1010" class="odd_gradeA" id="1010"><td>presto</td><td>10</td>
			
			<td class="">Nintendo DS browser</td>
			<td class=" ">Nintendo DS</td>
			<td class="center ">8.5</td>

			<td class="center ">C/A<sup>1</sup></td>
		</tr>
		<tr  data-position="1011" class="odd_gradeA" id="1011"><td>presto</td><td>11</td>
			
			<td class="">Nintendo DS browser</td>
			<td class=" ">Nintendo DS</td>
			<td class="center ">9</td>

			<td class="center ">A<sup>1</sup></td>
		</tr>
		<tr  data-position="1012" class="odd_gradeA" id="1012"><td>presto</td><td>12</td>
			
			<td class="">Nintendo DS browser</td>
			<td class=" ">Nintendo DS</td>
			<td class="center ">9.5</td>

			<td class="center ">A<sup>1</sup></td>
		</tr>
		<tr  data-position="47" class="odd_gradeX" id="146"><td>tasman</td><td>1</td>
			
			<td class="">Internet Explorer 4.5</td>
			<td class=" ">Mac OS 8-9</td>

			<td class="center ">-</td>
			<td class="center ">X</td>
		</tr><tr style=""  data-position="49" class="odd_gradeC" id="148"><td>tasman</td><td>2</td>
			
			<td class="">Internet Explorer 5.2</td>
			<td class=" ">Mac OS 8-X</td>

			<td class="center ">1</td>
			<td class="center ">C</td>
		</tr><tr  data-position="48" class="even_gradeC" id="147"><td>tasman</td><td>3</td>
			
			<td class="">Internet Explorer 5.1</td>
			<td class=" ">Mac OS 7.6-9</td>

			<td class="center ">1</td>
			<td class="center ">C</td>
		</tr><tr  data-position="1" class="odd_gradeX" id="100"><td>trident</td><td>1</td>
			
			<td class="">Internet Explorer 4.0</td>
			<td class=" ">Win 95+</td>
			<td class="center ">4</td>

			<td class="center ">X</td>
		</tr><tr  data-position="2" class="even_gradeC" id="101"><td>trident</td><td>2</td>
			
			<td class="">Internet Explorer 5.0</td>
			<td class=" ">Win 95+</td>
			<td class="center ">5</td>

			<td class="center ">C</td>
		</tr><tr style=""  data-position="4" class="even_gradeA" id="103"><td>trident</td><td>3</td>
			
			<td class="read_only">Internet Explorer 6(read only cell)</td>
			<td class=" ">Win 98+</td>
			<td class="center ">6</td>

			<td class="center ">A</td>
		</tr><tr  data-position="3" class="odd_gradeA" id="102"><td>trident</td><td>4</td>
			
			<td class="">Internet Explorer 5.5</td>
			<td class=" ">Win 95+</td>
			<td class="center ">5.5</td>

			<td class="center ">A</td>
		</tr><tr  data-position="5" class="odd_gradeA" id="104"><td>trident</td><td>5</td>
			
			<td class="">Internet Explorer 7</td>
			<td class="read_only ">Win XP SP2+(read only cell)</td>
			<td class="center ">7</td>

			<td class="center ">A</td>
		</tr><tr  data-position="6" class="even_gradeA" id="105"><td>trident</td><td>6</td>
			
			<td class="">AOL browser (AOL desktop)</td>
			<td class=" ">Win XP</td>
			<td class="center ">6</td>

			<td class="center read_only ">A(read only cell)</td>
		</tr>
		<tr  data-position="27" class="odd_gradeA" id="126"><td>webkit</td><td>1</td>
			
			<td class="">Safari 1.2</td>
			<td class=" ">OSX.3</td>
			<td class="center ">125.5</td>

			<td class="center ">A</td>
		</tr><tr  data-position="28" class="even_gradeA" id="127"><td>webkit</td><td>2</td>
			
			<td class="">Safari 1.3</td>
			<td class=" ">OSX.3</td>
			<td class="center ">312.8</td>

			<td class="center ">A</td>
		</tr><tr style=""  data-position="30" class="even_gradeA" id="129"><td>webkit</td><td>3</td>
			
			<td class="">Safari 3.0</td>
			<td class=" ">OSX.4+</td>
			<td class="center ">522.1</td>

			<td class="center ">A</td>
		</tr><tr  data-position="29" class="odd_gradeA" id="128"><td>webkit</td><td>4</td>
			
			<td class="">Safari 2.0</td>
			<td class=" ">OSX.4+</td>
			<td class="center ">419.3</td>

			<td class="center ">A</td>
		</tr><tr  data-position="31" class="odd_gradeA" id="130"><td>webkit</td><td>5</td>
			
			<td class="">OmniWeb 5.5</td>
			<td class=" ">OSX.4+</td>
			<td class="center ">420</td>

			<td class="center ">A</td>
		</tr><tr  data-position="32" class="even_gradeA" id="131"><td>webkit</td><td>6</td>
			
			<td class="">iPod Touch / iPhone</td>
			<td class=" ">iPod</td>
			<td class="center ">420.1</td>

			<td class="center ">A</td>
		</tr><tr  data-position="33" class="odd_gradeA" id="132"><td>webkit</td><td>7</td>
			
			<td class="">S60</td>
			<td class=" ">S60</td>
			<td class="center ">413</td>

			<td class="center ">A</td>
		</tr>
        
        
        
        </tbody>
</table>
			</div>
			<div class="spacer"></div>

			
	
	


			<h2>Other examples</h2>
			<ul>

				<li><a href="default.html">Basic usage</a></li>
                <li><a href="notify.html">Server-side notification</a></li>
                <li><a href="error.html">Server-side error handling</a></li>
				<li><a href="rowGrouping.html">Integration with row grouping plugin</a></li>
			</ul>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					DataTables Row Reordering Add-on &copy; Jovan Popovic 2012.<br>
					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2012<br>
				</span>
			</div>
		</div>
	</body>





</html>